<template>
    <div class="header">
      <div class="back-box" @click="handleClick" v-show="show">
        <img class="back" src="../../assets/back.png" alt="">
      </div>
      <div class="title">{{title}}</div>
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    title: String,
    show: Boolean
  },
  methods: {
    handleClick() {
      this.$store.commit("setTransition", "turn-off");
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';

.header {
  height: 100px;
  line-height: 100px;
  color: #333;
  position: fixed;
  z-index: 1000;
  background-color: $color-text;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

.back-box {
  height: 100px;
  line-height: 120px;
  flex: 1;
}

.back {
  height: 34px;
}

.title {
  flex: 1.5;
  font-weight: bold;
  font-size: 33px;
  color: $color-text-l;
}
</style>
